<template>
    <div class="chat-container">
      <el-chat class="chat-window"
               :messages="messages"
               :has-more="false"
               @send="sendMessage"
               @load-more="loadMoreMessages"
               @clear-history="clearMessages">
      </el-chat>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        messages: []
      }
    },
    created() {
      const messages = JSON.parse(localStorage.getItem('messages'));
      if (messages) {
        this.messages = messages;
      }
    },
    methods: {
      sendMessage(content) {
        const message = {
          content,
          time: new Date(),
          mine: true
        };
  
        // 将消息加入本地数组
        this.messages.push(message);
  
        // 将消息保存到本地存储中
        localStorage.setItem('messages', JSON.stringify(this.messages));
      },
      loadMoreMessages() {
        // 加载更多聊天记录的代码
      },
      clearMessages() {
        // 清除聊天记录的代码
  
        // 清除本地存储中的数据
        localStorage.removeItem('messages');
        this.messages = [];
      }
    }
  }
  </script>
  
  <style scoped>
  .chat-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .chat-window {
    flex: 1;
  }
  </style>
  